<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script src="./vue.global.js"></script>
		<link rel="stylesheet" href="./index.css" />
		<link rel="stylesheet" href="./table.css" />
		<link rel="stylesheet" href="./pugong.css" />
		<link rel="stylesheet" href="./utils.css" />
		<script src="./index.full.js"></script>

		<script>
			//适配代码
			(function(doc, win) {
				var docEI = doc.documentElement,
					resizeEvt =
					"orientationchange" in window ? "orientataionchange" : "resize",
					recalc = function() {
						var clientWidth = docEI.clientWidth;
						if (!clientWidth) return;
						//100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
						docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
					};

				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener("DOMContentLoaded", recalc, false);
			})(document, window);
		</script>
		<style>
			* {
				/* margin: 0;
        padding: 0; */
				font-size: 0.15rem;
			}
		</style>
	</head>

	<body>
		<div id="app" class="table-content">
			<h3 style="font-size: 0.25rem">员工健康状况调查表</h3>
			<div class="people-top mt-3">
				<div>工程名称：引江补汉工程土建施工及金结机电安装8标</div>
				<div style="display: flex; align-items: center; width: 200px">
					填表时间：<el-input v-model="healthForm.time" class="people-input" placeholder=" "></el-input>
				</div>
			</div>
			<div class="table-form">
				<el-form ref="dataForm" :model="healthForm" label-width="118px" class="dataForm">
					<el-row>
						<el-row>
							<el-col :span="24">
								<el-row>
									<el-col :span="6">
										<el-form-item label="姓名" prop="memberId" class="formItemDuty" style="border-top: 0px">
											<el-input v-model="healthForm.name" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
									<el-col :span="6">
										<el-form-item label="性别" prop="" class="formItemDuty" style="border-top: 0px">
											<el-input v-model="healthForm.sex" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
									<el-col :span="6">
										<el-form-item label="民族" prop="" class="formItemDuty" style="border-top: 0px">
											<el-input v-model="healthForm.nation" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
									<el-col :span="6">
										<el-form-item label="所属单位" prop="" class="formItemDuty" style="border-top: 0px">
											<el-input v-model="healthForm.affiliation" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<el-form-item label="出生年月" prop="" class="formItemDuty">
											<el-input v-model="healthForm.birthDate" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
									<el-col :span="6">
										<el-form-item label="年龄" prop="" class="formItemDuty">
											<el-input v-model="healthForm.age" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
									<el-col :span="6">
										<el-form-item label="籍贯" prop="" class="formItemDuty">
											<el-input v-model="healthForm.origin" class="formItemDutyIn" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row style="border-bottom: 1px solid">
									<el-col :span="6">
										<el-form-item label="身高" prop="" class="formItemDuty">
											<el-input v-model="healthForm.height" class="formItemDutyIn" @input="onInput($event,'height')"/>
										</el-form-item>
									</el-col>
									<el-col :span="6">
										<el-form-item label="体重" prop="" class="formItemDuty">
											<el-input v-model="healthForm.weight" class="formItemDutyIn" @input="onInput($event,'weight')"/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="有无病史" prop="" class="formItemDuty">
											<el-input v-model="healthForm.medicalHistory" class="formItemDutyIn" @input="onInput($event,'medicalHistory')"/>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row class="radio-box">
									<el-col :span="24">
										<span class="radio-label">1、之前是否有参加常规健康检查？</span>
										<el-radio-group v-model="healthForm.radio1" class="ml-4" @change="onInput($event,'radio1')">
											<el-radio value="1" size="large">
												是 
												<!-- <el-input class="people-input" style="border-bottom: 1px solid; height: 0.2rem"
													v-model="healthForm.checkTime" /> -->
											</el-radio>
											<el-radio value="0" size="large">否</el-radio>
										</el-radio-group>
									</el-col>
								</el-row>
								<el-row class="radio-box">
									<el-col :span="24">
										<span class="radio-label">2、您目前的健康状况？</span>
										<el-radio-group v-model="healthForm.radio2" @change="onInput($event,'radio2')">
											<el-radio :value="1">非常好</el-radio>
											<el-radio :value="2">好</el-radio>
											<el-radio :value="3">一般</el-radio>
											<el-radio :value="4">差</el-radio>
										</el-radio-group>
									</el-col>
								</el-row>
								<el-row class="radio-box">
									<el-col :span="24">
										<span class="radio-label">3、您是否患有下列“三高”病症？</span>
										<el-checkbox-group v-model="healthForm.radio3" class="checkbox">
											<el-checkbox label="高血压" value="1" />高血压
											<el-checkbox label="高血脂" value="2" />高血脂
											<el-checkbox label="糖尿病" value="3" />糖尿病
											<el-checkbox label="无" value="0" />
										</el-checkbox-group>
									</el-col>
								</el-row>
								<el-row class="radio-box">
									<el-col :span="24">
										<span class="radio-label">4、您家族是否患有传染性疾病，如乙肝等？</span>
										<el-radio-group v-model="healthForm.radio4" class="ml-4" @change="onInput($event,'radio4')">
											<el-radio value="1" size="large"> 有 </el-radio>
											<el-radio value="0" size="large">无</el-radio>
										</el-radio-group>
									</el-col>
								</el-row>
								<el-row class="radio-box">
									<el-col :span="24">
										<span class="radio-label">5、您是否被诊断为冠心病、中风、心律失常、风湿性心脏病等？</span>
										<el-radio-group v-model="healthForm.radio5" class="ml-4" @change="onInput($event,'radio5')">
											<el-radio value="1" size="large"> 是 </el-radio>
											<el-radio value="0" size="large">否</el-radio>
										</el-radio-group>
									</el-col>
								</el-row>

								<el-row class="radio-box">
									<el-col :span="24">
										<span class="radio-label">6、您饮酒吗？ </span>
										<el-radio-group v-model="healthForm.radio6" @change="onInput($event,'radio6')">
											<el-radio :value="1">饮酒</el-radio>
											<el-radio :value="2">偶尔</el-radio>
											<el-radio :value="3">滴酒不沾</el-radio>
										</el-radio-group>
									</el-col>
								</el-row>

							</el-col>
						</el-row>
					</el-row>
				</el-form>
				<div class="form-bottom1">
					<div style="text-align: left">
						说明：为了更好了解项目部员工的健康状况，请您如实认真填写此问卷调查，我们将据此为您提供健康、营养及生活方式的合理化建议。您的个人资料和健康档案我们将为您妥善保管，敬请放心。
					</div>
					<!-- <div style="
              display: flex;
              align-items: center;
              width: 200px;
              float: right;
            " @click="setUpEquipment('healthForm.signSelf','TaskSignFinger')">
						本人签名
						<el-image class="sign_img" v-show="healthForm.signSelf" :src="healthForm.signSelf" fit="fill"></el-image>
					</div> -->
				</div>

				<div class="d-flex flex-row mt-2 justify-content-between">
					<div class="text-left">
						<div @click="setUpEquipment('healthForm.signSelf','TaskSignFinger')">本人签名</div>
						<el-image v-show="healthForm.signSelf" class="sign_img" :src="healthForm.signSelf" fit="fill"></el-image>
	
					</div>
					<div>
						<el-input v-model="healthForm.year" class="people-input" placeholder=" " style="width: 0.8rem"></el-input>
						年
						<el-input v-model="healthForm.month" class="people-input" placeholder=" " style="width: 0.5rem"></el-input>
						月
						<el-input v-model="healthForm.day" class="people-input" placeholder=" " style="width: 0.5rem"></el-input>
						日
					</div>
				</div>


			</div>
		</div>
		<script>
			const {
				createApp,
				reactive,
				toRefs,
				ref,
				onMounted
			} = Vue;
			const vue3Composition = {
				setup() {
					const healthForm = ref({
						time: "",//填表时间
						name: "",//姓名
						sex: "",//性别
						nation: "",//民族
						affiliation: "",//所属单位
						birthDate: "",//出生
						age: "",//年龄
						origin: "",//籍贯
						height: "",//身高
						weight: "",//体重
						medicalHistory: "",//病史
						radio1: "",//1、之前是否有参加常规健康检查？
						radio2: "",//2、您目前的健康状况？
						radio3: [],//3、您是否患有下列“三高”病症？
						radio4: "",//4、您家族是否患有传染性疾病，如乙肝等？
						radio5: "",//5、您是否被诊断为冠心病、中风、心律失常、风湿性心脏病等？
						radio6: "",//6、您饮酒吗？
						signSelf: "",//签字
						year:'',
						month:'',
						day:''
					});
					window.setSign = (event) => {
						healthForm.value[event.key] = event.img;
					};

					window.getData = (event) => {
						return healthForm.value
					};
					window.setData = (data) => {
						healthForm.value = data
					}
					const onInput = (e, key) => {
						window.parent.postMessage({
							key,
							isFill: e != '',
							form:'healthForm'
						}, '*')
					}
					//peopleForm.sign
					const setUpEquipment = (key, type) => {
						window.parent.childListener({
							key,
							type,
						});
					};
					return {
						healthForm,
						setUpEquipment,
						onInput
					};
				},
			};
			const app = createApp(vue3Composition)
				.use(ElementPlus)
				.mount("#app");
		</script>
	</body>
</html>